<template>
  <div></div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "three",
  props: {
    width: {
      type: Number
    },
    height: {
      type: Number
    }
  },
  mounted() {
    const width = this.width,
      height = this.height;
    // 画布周边的空白
    var padding = { left: 30, right: 30, top: 50, bottom: 180 };
    // 在body里添加一个SVG画布
    let svg = d3
      .select(this.$el)
      .append("svg")
      .attr("width", width)
      .attr("height", height);
    let tree = d3
      .tree()
      .size([height, width - padding.bottom])
      .separation(function(a, b) {
        return (a.parent == b.parent ? 1 : 2) / a.depth;
      }); // 设定节点之间的间隔
    // 新建一个贝塞尔曲线函数
    var BCG = d3
      .linkHorizontal() // 卧式
      .x(function(d) {
        return d.y;
      })
      .y(function(d) {
        return d.x;
      });
    // let BCG = d3
    //   .linkVertical() // 水平
    //   .x(function(d) {
    //     return d.y;
    //   })
    //   .y(function(d) {
    //     return d.x;
    //   });
    d3.json("/api/three.json").then(data => {
      window.console.log(data);
      // 将原始数据转化为布局数据  
      let hierarchyData = d3.hierarchy(data);
      // 将布局数据转化为树状图所需的数据
      let treeData = tree(hierarchyData);
      // 将树状图数据取得节点数据和边数据(节点连线)
      let nodes = treeData.descendants();
      let links = treeData.links();
      svg
        .selectAll("path")
        .data(links)
        .enter()
        .append("path")
        .attr("d", function(d) {
          let start = { x: d.source.x, y: d.source.y + padding.top};
          let end = { x: d.target.x, y: d.target.y + padding.top};
          return BCG({ source: start, target: end });
        })
        .attr("stroke-width", 1)
        .attr("fill", "none")
        .attr("stroke", "rgb(148,70,183)");
      let gs = svg
        .selectAll("g")
        .data(nodes)
        .enter()
        .append("g")
        .attr("transform", function(d) {
          return `translate(${d.y + padding.top},${d.x})`;
        });
      gs.append("circle")
        .attr("r", 6)
        .attr("fill", "white")
        .attr("stroke", "blue")
        .attr("stroke-width", 1);
      gs.append("text")
        .attr("x", function(d) {
          return d.children ? -40 : 8;
        })
        .attr("y", -5)
        .attr("dy", 10)
        .attr("fill", "red")
        .text(function(d) {
          return d.data.name;
        });
    });
  }
};
</script>

<style scoped>
</style>

